<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        简单点说：模板语法就是{{}}语法
        v-html 和 v-text 的区别：
            v-html : data中有html标签，且需要解析时，使用v-html
            v-text : 将data中的数据当作一个字符串输出
        插值：
            文本
            原始html
            属性
            JS表达式
        指令： 
            v-html
            v-text
            v-bind (缩写: v-bind:class 可以写成 :class)
            v-if / v-else-if / v-else / v-show
            v-for
            v-model (表单的输入绑定) 
            v-on (绑定事件) (缩写: v-on:click 可以写成 @click)
            v-slot (插槽)
     -->
    <div id="app">
        <div>{{msg}}</div>
        <div>{{test}}</div>  <!-- 结果是：<h1>hello word</h1> 不能解析html标签 -->
        <div v-html="test"></div> <!-- 结果是：hello word 具有h1样式   解析输出 -->
        <div v-text="test"></div> <!-- 结果是：<h1>hello word</h1>   原样输出-->
        <!-- 
            class的角色就是一个属性 ，属性值可以是一个固定的字符串，也可以是一个变量。 如果是一个变量的话要在class前加一个 v-bind: 
            注意：如果属性值是一个变量/Boolean/Number，需要使用绑定属性(v-bind)
        -->
        <div class="aaa"></div> <!-- 结果是： <div class="aaa"></div> -->
        <div v-bind:class="aaa"></div> <!-- 结果是： <div class="active"></div> -->
        <!-- JS表达式 : 但不推荐在页面结构中广泛的使用表达式，会大致代码的冗余度很高 -->
        <div>{{1+1}}和{{msg.split('').reverse().join('')}}</div> <!-- 结果是：2和euv olleh -->
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app', // 找到DOM节点
        data:{ // vue的初始化数据
            msg:'hello vue',
            test:'<h1>hello word</h1>',
            aaa:'active'
        }
    })
</script>
</html>